from langchain.prompts import (
    SystemMessagePromptTemplate,
    ChatPromptTemplate,
    HumanMessagePromptTemplate,
)

from utils.utils import read_file, vue_output_parser
from llm.llm import llm
import uuid

page_code = read_file("./web/src/views/template/components/Page.vue")
bento_item_code = read_file("./web/src/components/BentoItem.vue")
example_code = read_file("./web/src/views/template/components/Example.vue")


def build_vue(summary, filename=""):
    sys_tmpl = """
    请将输入内容转换为一个具有Bento Grid风格的Vue Setup组件，用于放在页面代码中，具体要求如下：

    ## 设计风格要求
    
    1. 样式

    - 同级元素保持垂直/水平间距一致性
    - 页面整体采用Bento Grid风格，组件请贴合页面风格
    - 页面使用了CSS Grid布局（样式可以页面代码），组件请设置的对应grid-column和grid-row
    - 如果使用 grid-column: span 3，请将内容高度设置 height:120px;
    - 如果使用 grid-column: span 1，请将内容高度设置 height:360px;

    2. **字体与视觉比例**：
    - 核心数据/要点使用超大字体（至少48px）
    - 中文使用粗体（font-weight: 700+），英文作为辅助说明使用小字号
    - 视觉元素大小比例至少3:1（主元素:次元素）

    3. **图形元素**：
    - 使用简洁的线性图标（SVG格式）
    - 数据可视化采用极简风格图表（折线图/柱状图使用单色+透明度渐变）
    - 避免使用emoji，改用专业设计的线条图标

    4. **色彩方案**：
    - 主色：科技蓝（#2962FF）
    - 辅助色：荧光绿（#00E676）、霓虹粉（#FF4081）
    - 渐变处理：单色自身透明度渐变（如blue-500到blue-500/30）
    - 禁止多色交叉渐变

    5. **科技感处理**：
    - 添加微妙的背景网格线（opacity: 0.1）
    - 关键元素使用轻微的内发光效果
    - 悬停状态有粒子动效（可选）

    ## 组件要求
    - 严格只生成一个 app-bento-item 模块，不要创建多个
    - app-bento-item 已经是根元素，不需要额外包裹容器
    - 直接使用 app-bento-item 内置的CSS样式
    - 所有自定义样式必须编写在组件内部

    ## 内容完整性
    - 必须包含原始内容所有要点
    - 可以重组但不可删除任何信息点
    - 次要信息可以折叠/悬停显示

    ## 页面代码：
    ```vue
    {page_code}
    ```

    ## app-bento-item 组件代码：
    ```vue
    {bento_item_code}
    ```

    ## 参考代码：
    ```vue
    {example_code}
    ```
    """

    human_tmpl = "输入内容：\n{summary}"

    system_prompt = SystemMessagePromptTemplate.from_template(sys_tmpl)
    human_prompt = HumanMessagePromptTemplate.from_template(human_tmpl)
    chat_prompt = ChatPromptTemplate.from_messages([system_prompt, human_prompt])

    formatted_system_prompt = system_prompt.format(
        page_code=page_code, bento_item_code=bento_item_code, example_code=example_code
    )
    print("formatted_system_prompt", formatted_system_prompt.content)

    chain = chat_prompt | llm | vue_output_parser()

    res = chain.invoke(
        {
            "summary": summary,
            "page_code": page_code,
            "bento_item_code": bento_item_code,
            "example_code": example_code,
        }
    )

    print(res)
    # print("res", res.content)

    if filename == "":
        filename = str(uuid.uuid4()) + ".vue"

    # 保存
    with open("./web/public/remote-component/" + filename, "w", encoding="utf-8") as f:
        f.write(res)

    print("filename", filename)

    return filename
